<template>
  <div class="commonDictConfig">
    <el-tabs v-model="data.dicOption" stretch @tab-click="handleTabClick">
      <el-tab-pane label="系统字典" name="sysDict">
        <div v-if="data.dicOption==='sysDict'">
          <el-select filterable clearable v-model="data.dicQuery.dictCode">
            <el-option v-for="(item,index) in sysDictList" :label="item.dictName" :value="item.dictCode"></el-option>
          </el-select>
        </div>
      </el-tab-pane>
      <el-tab-pane label="静态数据" name="static">

        <div v-if="data.dicData">

          <draggable tag="ul"
                     :list="data.dicData"
                     :group="{ name: 'dic' }"
                     ghost-class="ghost"
                     handle=".drag-item">
            <template #item="{element,index}">
              <li class="staticDataItem" :key="index">
                <el-icon class="drag-item" style="font-size: 16px; margin: 0 5px; cursor: move;">
                  <operation></operation>
                </el-icon>
               
                <el-input style="margin-right: 5px;"
                          s
                          v-model="element.label"
                          placeholder="label"></el-input>
                <el-input
                    v-model="element.value"
                    placeholder="value"></el-input>
                <el-button @click="handleRemoveFields(index)"
                           circle
                           plain
                           type="danger"

                           icon="el-icon-minus"
                           style=" margin-left: 5px;"></el-button>
              </li>
            </template>
          </draggable>
        </div>

        <div style="margin-left: 22px;">
          <el-button text type="primary"
                     @click="handleAddFields">添加列
          </el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane label="远端数据"
                   name="remote">
        网址
        <el-input v-model="data.dicUrl"
                  placeholder="远端数据字典网址"></el-input>
        请求方法
        <el-select v-model="data.dicMethod"
                   placeholder="请求方法"
                   style="width: 100%;">
          <el-option label="POST"
                     value="post"></el-option>
          <el-option label="GET"
                     value="get"></el-option>
        </el-select>
        <p v-if="data.dicMethod === 'post'&&data.dicOption==='remote'">
          请求参数
          <avue-dynamic v-model="data.dicQueryConfig" :children="postMethodOption"></avue-dynamic>
        </p>

        <el-form-item label="字典key配置">

        </el-form-item>
        <ul>
          <li class="staticDataItem" v-for="(value, key) in data.props"
              :key="key">
            <span style="width: 50px">{{ key }}</span>
            <el-input size="small"
                      v-model="data.props[key]"
                      placeholder="key配置"></el-input>
          </li>
        </ul>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
import Draggable from 'vuedraggable'
import avueOptionTools from "@/config/avueOptionTools";
import {Operation} from "@element-plus/icons-vue";

export default {
  name: "commonDictConfig",
  components: {Operation, Draggable},
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  computed: {
    postMethodOption() {
      return {
        column: [
          {
            type: 'input',
            prop: 'key',
            label: 'key'
          }, {
            type: 'input',
            prop: 'value',
            label: 'value'
          }
        ]
      }
    }
  },
  data() {
    return {
      sysDictList: []
    }
  },
  created() {
    this.loadDictCodes()
  },
  methods: {
    loadDictCodes() {
      avueOptionTools.loadDictCodes().then(res => {
        this.sysDictList = res.data.data || []
      })
    },
    handleTabClick({paneName}) {
      if (paneName === "static" && !this.data.dicData) {
        this.data.dicData = []
        return
      }
      if (paneName === 'sysDict' && !this.data.dicQuery) {
        this.data.dicQuery = {}

        return;
      }
      if (paneName === 'remote' && !this.data.dicQueryConfig) {
        this.data.dicQueryConfig = []
      }
    },
    handleRemoveFields(index) {
      this.data.dicData.splice(index, 1)
    },
    handleAddFields() {
      const i = Math.ceil(Math.random() * 99999)
      if (!this.data.dicData) {
        this.data.dicData = []
      }
      this.data.dicData.push({label: `字段${i}`, value: `col_${i}`})
    },

  }

}
</script>
<style>
.commonDictConfig {
  ul {
    list-style: none;
    padding-left: 0;
  }

  .staticDataItem {
    margin-top: 5px;
    display: flex;
    align-items: center;
    width: 100%;
  }
}

</style>
